package com.example.app.components


import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.PointMode
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.imageResource
import com.example.app.R

@Composable
fun CanvasSample() {

    var imageBitmap: ImageBitmap? = null
    // LocalContext 应用程序可使用的上下文
    with(LocalContext.current) {
        imageBitmap = ImageBitmap.imageResource(id = R.drawable.a)
    }
    // contentDescription 针对残障人士的辅助信息
    // start 起点(x轴, y轴)
    // end 终点(x轴, y轴)
    // strokeWidth 线的宽度
    // cap 线的两头的形状
    Canvas(
        modifier = Modifier.size(200.dp),
        onDraw = {
            // drawLine 线
            drawLine(
                color = Color.Blue,
                start = Offset(100f, 50f),
                end = Offset(100f, 800f),
                strokeWidth = 20f,
                cap = StrokeCap.Round
            )

            // 矩形
            drawRect(
                color = Color.Red,
                topLeft = Offset(100f, 50f),
                size = Size(300f, 300f)
            )

            // 图片
            // ImageBitmap需要导入
            imageBitmap?.let {
                drawImage(image = it, topLeft = Offset(100f, 200f))
            }

            // 类似drawReact,多个圆角
            drawRoundRect(
                color = Color.Green,
                topLeft = Offset(80f, 50f),
                size = Size(300f, 300f),
                cornerRadius = CornerRadius(50f, 100f)
            )

            // 圆形
            // style = Stroke(100f)设置了此属性后就是圆圈
            drawCircle(
                color = Color.Black,
                radius = 20f,
                style = Stroke(100f)
            )

            // 椭圆
            drawOval(
                color = Color.Yellow,
                size = Size(100f, 300f)
            )

            // 扇形
            // startAngle扇形起始坐标点
            // sweepAngle已填充部分角度
            // style = Stroke如果不设置则会填满该部分
            drawArc(
                color = Color.Gray,
                startAngle = 0f,
                sweepAngle = 30f,
                useCenter = true,
                style = Stroke(20f)
            )

            // pointMode = PointMode.Lines 每两点之间会相连
            // PointMode.Polygon 所有点都会相连
            // PointMode.Points 为单点,不连接
            drawPoints(
                listOf(
                    Offset(10f, 20f),
                    Offset(20f, 30f),
                    Offset(30f, 40f),
                    Offset(30f, 50f)
                ),
                pointMode = PointMode.Points,
                color = Color.Magenta
            )
        }
    )
}

@Preview(
    showSystemUi = true
)
@Composable
fun CanvasSamplePreview() {
    CanvasSample()
}

